<template>
  <div>
    <div>
      <div class="mlt" style="margin-bottom: 10px">
        <el-button
          v-permissions="{ permission: ['add:CustomerLevel'] }"
          type="primary"
          @click="addReservationClisk"
        >
          新增等级
        </el-button>
      </div>
      <div class="ml">
        <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
          <el-table-column label="级别名称" prop="level_name" width="" />
          <el-table-column label="等级成长值：" prop="level_up" width="" />
          <el-table-column label="级别图标" prop="">
            <template slot-scope="scope">
              <img alt="" :src="scope.row.level_logo" style="width: 30px" />
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button
                v-permissions="{ permission: ['edit:CustomerLevel'] }"
                type="primary"
                @click="modify(scope.row)"
              >
                修改
              </el-button>
              <el-button
                v-permissions="{ permission: ['delete:CustomerLevel'] }"
                type="primary"
                @click="deletes(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      append-to-body
      title="添加等级"
      :visible.sync="innerVisible"
      width="30%"
    >
      <div>
        <el-form label-position="left">
          <el-form-item label="等级名称：">
            <el-input
              v-model="form.level_name"
              placeholder="请输入等级名称"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="成长数值：">
            <el-input
              v-model="form.level_up"
              placeholder="请输入等级成长值："
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="选择图标：">
            <el-upload
              action="https://devapi.jbkl.com/api/upload_img"
              :before-upload="beforeUpload"
              class="avatar-uploader"
              :on-error="uploadImgErr"
              :on-success="uploadImgSuc"
              :show-file-list="false"
            >
              <img v-if="imageUrl" class="avatar" :src="imageUrl" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  border: 1px solid #c0c4cc;
                "
              ></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" @click="innerVisible = false">取消</el-button>
        <el-button type="primary" @click="Submit()">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { cusLevelList, cusLevelAdd, cusLevelDel } from '@/api/level'

  export default {
    data() {
      return {
        innerVisible: false,
        input: '',
        pagesize: 10,
        emptyText: ' ',
        tableData: [],
        fileList: [],
        imageUrl: '',
        form: {
          level_name: '',
          level_up: '',
        },
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          limit: this.pagesize,
        }
        // 等级list
        cusLevelList(params).then((res) => {
          this.tableData = res.data
          loading.close()
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      addReservationClisk() {
        this.form = {
          level_name: '',
          level_up: '',
        }
        this.imageUrl = ''
        this.innerVisible = true
      },
      showMain(e) {
        this.flag = e
      },
      // 修改
      modify(e) {
        this.form.id = e.id
        this.form.level_name = e.level_name
        this.form.level_up = e.level_up
        this.imageUrl = e.level_logo

        this.innerVisible = true
      },
      // 删除
      deletes(e) {
        const params = {
          id: e.id,
        }
        cusLevelDel(params).then(() => {
          this.init
        })
      },

      // 提交
      Submit() {
        if (this.form.id) {
          this.form.level_logo = this.imageUrl
        }
        const jy = {
          level_name: '请输入等级名称',
          level_up: '请输入等级成长值',
          level_logo: '请输入等级logo',
        }
        for (var key in this.form) {
          if (this.form[key] == '') {
            this.$message.error(jy[key])
            return
          }
        }
        cusLevelAdd(this.form)
          .then(() => {
            this.init()
            this.$message({
              message: '成功',
              type: 'success',
            })
            this.form = {}
            this.imageUrl = ''
          })
          .catch(() => {
            this.$message.error('失败')
          })
        this.innerVisible = false
      },
      uploadImgErr() {},
      uploadImgSuc(res, file) {
        this.form.level_logo = res.data
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      // 图片上传尺寸大小检验
      beforeUpload(file) {
        let _this = this
        const is1M = file.size / 1024 / 1024 < 1 // 限制小于1M
        const isSize = new Promise(function (resolve, reject) {
          let width = 100 // 限制图片尺寸为654X270
          let height = 100
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function () {
            let valid = img.width === width && img.height === height
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(
          () => {
            return file
          },
          () => {
            _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
            return Promise.reject()
          }
        )
        if (!is1M) {
          _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
        }
        return isSize & is1M
      },
    },
  }
</script>
<style></style>
